import React, { Component } from 'react'
import { FooterTab, RowLineText, Calendar } from '../common'

export default class RankingList extends Component {
  render() {
    return (
      <div className={`rt-ranking-list-container`}>
        <RowLineText
          lft="日排行榜"
          rgt="月排行榜"
          onChange={() => {
            console.log('todo')
          }}
        />

        <Calendar />

        <div className={`rt-substance-container`}>
          <div className={`rt-row-box`}>
            <span><span>名次</span></span>
            <span>客户</span>
            <span>收益</span>
            <span>年化收益</span>
          </div>

          <div className={`rt-row-box`}>
            <span><span className={`rt-circle rt-first`}>1</span></span>
            <span>777****0028</span>
            <span>79.56 %</span>
            <span>20685.31 %</span>
          </div>

          <div className={`rt-row-box`}>
            <span><span className={`rt-circle rt-second`}>2</span></span>
            <span>777****0028</span>
            <span>79.56 %</span>
            <span>20685.31 %</span>
          </div>

          <div className={`rt-row-box`}>
            <span><span className={`rt-circle rt-third`}>3</span></span>
            <span>777****0028</span>
            <span>79.56 %</span>
            <span>20685.31 %</span>
          </div>

          <div className={`rt-row-box`}>
            <span><span>4</span></span>
            <span>777****0028</span>
            <span>79.56 %</span>
            <span>20685.31 %</span>
          </div>
        </div>

        <FooterTab defaultActiveIndex={4} />
      </div>
    )
  }
}